<template>
  <demoBlock title="搭配单元格组件使用"  class="demo-checkbox">
    <vcu-checkbox-group v-model="checked">
      <vcu-cell-group >
        <vcu-cell
          v-for="(item, index) in list"
          clickable
          :key="item"
          :title="`复选框 ${item}`"
          @click="toggle(index)"
        >
          <template #right-icon>
            <vcu-checkbox
              :name="item"
              :ref="(el) => (checkboxRefs[index] = el)"
              @click.stop
            />
          </template>
        </vcu-cell>
      </vcu-cell-group>
    </vcu-checkbox-group>
  </demoBlock>
</template>

<script>
import { defineComponent, ref, onBeforeUpdate } from "vue";

export default defineComponent({
  setup() {
    const checked = ref([]);
    const checkboxRefs = ref([]);
    const toggle = (index) => {
      checkboxRefs.value[index].toggle();
    };

    onBeforeUpdate(() => {
      checkboxRefs.value = [];
    });

    return {
      list: ["a", "b"],
      toggle,
      checked,
      checkboxRefs,
    };
  },
});
</script>
<style lang="less" scoped>

</style>
